@namespace DevToys.Blazor.Components
@typeparam TElement
@inherits SelectBase<TElement>

<CascadingValue Name="ParentIsEnabled" Value="@IsActuallyEnabled">
    <CascadingValue Value="this" IsFixed="false">
        <Container HorizontalAlignment="@HorizontalAlignment"
                   VerticalAlignment="@VerticalAlignment"
                   Width="@Width"
                   Height="@Height"
                   MarginLeft="@MarginLeft"
                   MarginRight="@MarginRight"
                   MarginTop="@MarginTop"
                   MarginBottom="@MarginBottom"
                   PaddingLeft="@PaddingLeft"
                   PaddingRight="@PaddingRight"
                   PaddingTop="@PaddingTop"
                   PaddingBottom="@PaddingBottom"
                   IsEnabled="@IsActuallyEnabled"
                   IsVisible="@IsVisible">
            <div id=@Id
                 class="combo-box-with-header @(FinalCssClasses)"
                 style="@(Style)"
                 @attributes="AdditionalAttributes">

                @if (!string.IsNullOrWhiteSpace(Header))
                {
                    <TextBlock Appearance="TextBlockAppearance.Body" Class="combo-box-header" Text="@Header" />
                }

                <Button @ref="_button"
                        Class="@($"combo-box-button {FinalCssClasses}")"
                        HorizontalAlignment="@HorizontalAlignment"
                        Width="@Width"
                        Appearance="ButtonAppearance.Neutral"
                        IsEnabled="@IsActuallyEnabled"
                        @onclick="@ToggleDropDown">
                    @if (SelectedItem is not null)
                    {
                        @ItemTemplate(SelectedItem)
                    }
                    <div class="arrow-down-icon">
                        <FontIcon Glyph="@('\uf2a6')" Height="12" Width="12" />
                    </div>

                    <Popover Open="_isOpen"
                             AnchorOrigin="Origin.CenterCenter"
                             TransformOrigin="Origin.CenterCenter"
                             RelativeWidth="false"
                             @ontouchend:stopPropagation>
                        <CascadingValue Value="@this" IsFixed="true">
                            <FocusTrapper Style="display: contents;"
                                          OnEscapeKeyPressed="OnEscapeKeyPressed"
                                          @onfocusout="OnEscapeKeyPressed">
                                <ScrollViewer @ref="_scrollViewer"
                                              Orientation="UIOrientation.Vertical"
                                              IsEnabled="@IsActuallyEnabled"
                                              Class="@FinalCssClasses"
                                              Style="@Style"
                                              UseNativeScrollBar="true"
                                              AdditionalAttributes="@AdditionalAttributes">
                                    <ul @ref="_listBox"
                                        role="menu"
                                        class="combo-box-list-box"
                                        tabindex="0"
                                        @onkeydown="OnKeyDown">

                                        @if (Virtualize)
                                        {
                                            <Virtualize Items="@Items" Context="item">
                                                @RenderItem(item)
                                            </Virtualize>
                                        }
                                        else if (Items is not null)
                                        {
                                            foreach (var item in Items)
                                            {
                                                @RenderItem(item)
                                            }
                                        }

                                    </ul>
                                </ScrollViewer>
                            </FocusTrapper>
                        </CascadingValue>
                    </Popover>
                </Button>
            </div>
        </Container>
    </CascadingValue>
</CascadingValue>

@code {
    private RenderFragment<TElement> RenderItem { get; set; } = default!;

    protected override Task OnInitializedAsync()
    {
        RenderItem = (item) => __builder =>
        {
            bool isSelected = object.ReferenceEquals(item, SelectedItem);
            if (!OverrideDefaultItemTemplate)
            {
                <ListBoxItem OnSelected="OnItemClick"
                             IsSelected="isSelected"
                             Item="item"
                             id="@(isSelected ? SelectedItemId : string.Empty)">
                    @ItemTemplate(item)
                </ListBoxItem>
            }
            else
            {
                <div class="@((isSelected ? "selected" : string.Empty))"
                     id="@(isSelected ? SelectedItemId : string.Empty)"
                     @onclick="@(() => OnItemClick(item))">
                    @ItemTemplate(item)
                </div>
            }
        };

        return base.OnInitializedAsync();
    }
}